<template>
    <div
        ref="container"
        class="center text-center col-span-6 flex flex-col items-center justify-center text-black h-screen bg-green-100"
    >
        <!-- <div
            ref="ball"
            class="w-5px h-5px bg-emerald-7 b-rd-10px ml--1400px mt--100px"
        ></div> -->
        <div ref="top" class="font-500 text-2xl mb-5">wenkai's</div>
        <div
            ref="middle"
            class="text-6xl font-500 text-green-400 b-blue-500 mt-2"
        >
            Complete collection of front-end style integration
        </div>
        <div ref="bottom" class="text-sm font-500 mt-5 text-gray-400">
            基于vue3 + ts + nuxt写的包含各种有趣新奇的一些前端样式
        </div>
    </div>
</template>
<script setup lang="ts">
import { useTranslateX, useTranslateY, useAnime } from '@/composables/useAnime';
const ball = ref<HTMLElement | null>(null);
const top = ref<HTMLElement | null>(null);
const middle = ref<HTMLElement | null>(null);
const bottom = ref<HTMLElement | null>(null);
// useTranslateX(middle, -600, 0, 0, 600);

useTranslateY(top, -60, 0, 600, 200);
useAnime({
    targets: middle,
    // translateX: [-600, 0],
    duration: 600,
    easing: 'easeInOutQuad',
    opacity: [0, 1],
    scale: {
        value: [0, 1],
        duration: 1000,
        easing: 'easeInOutQuart',
    },
    delay: 1000,
    // loop: true,
});
useTranslateY(bottom, 60, 0, 600, 200);
// useAnime({
//     targets: ball,
//     translateX: [
//         { value: 1400, duration: 1000, delay: 500 },
//         { value: 0, duration: 1000, delay: 500 },
//     ],
//     translateY: [
//         { value: 0, duration: 500 },
//         { value: 200, duration: 500, delay: 1000 },
//         { value: 0, duration: 500, delay: 1500 },
//     ],
//     scaleX: [
//         { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
//         { value: 1, duration: 900 },
//         { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
//         { value: 1, duration: 900 },
//     ],
//     scaleY: [
//         { value: [1.75, 1], duration: 500 },
//         { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
//         { value: 1, duration: 450 },
//         { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
//         { value: 1, duration: 450 },
//     ],
//     easing: 'easeOutElastic(1, .8)',
//     loop: true,
// });
</script>
